<template>
	<div>
		<div v-if="ruleForm.orderBatchPrdNotice.auditState || ruleForm.orderBatchPrdNotice.auditState === 0" class="flex-end-center margin-bottom-10">
			<!--<el-button type="primary" plain class="flex-start-center" style="cursor: pointer;">
				<div class="flex-center">
					<jk-state-bar class="margin-right-10" :state="ruleForm.orderBatchPrdNotice.auditState" :state-list="noticeStateList"></jk-state-bar>
					<span class="">{{ ruleForm.orderBatchPrdNotice.code || '' }}</span>
				</div>
			</el-button>-->
			<el-switch v-model="ruleForm.orderBatchPrdNotice.auditState" :inactive-value="2" :active-value="3" active-text="已完成" inactive-text="排产中" @change="returnData"></el-switch>
		</div>
		<el-row class="flex-start-center-wrap">
			<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
				<el-form-item class="margin-bottom-10" label="区域" prop="workshopId">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.orderBatchPrdNotice.workshopName || '' }}</span>
					<jk-select v-else v-model="ruleForm.orderBatchPrdNotice.workshopId" :clearable="false" placeholder="区域" :option-list="workshopList" size="medium" class="width-100-percent" @change="onWorkshopChange"></jk-select>
				</el-form-item>
			</el-col>
			<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
				<el-form-item class="margin-bottom-10" label="工序" prop="processId">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.orderBatchPrdNotice.processName || '' }}</span>
					<jk-select v-else v-model="ruleForm.orderBatchPrdNotice.processId" :clearable="false" placeholder="工序" :option-list="processList" size="medium" class="width-100-percent" @change="onProcessChange"></jk-select>
				</el-form-item>
			</el-col>-->
			<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
				<el-form-item class="margin-bottom-10" label="排产数量">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.orderBatchPrdNotice.productionQty || '' }}</span>
					<jk-number-input v-else v-model="ruleForm.orderBatchPrdNotice.productionQty" placeholder="排产数量" size="medium" class="width-100-percent" @change="returnData"></jk-number-input>
				</el-form-item>
			</el-col>
			<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
				<el-form-item class="margin-bottom-10" label="细纱管颜色">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.orderBatchPrdNotice.inputTubeColorList ? ruleForm.orderBatchPrdNotice.inputTubeColorList.map(x => x.name).join(',') : '' }}</span>
					<checkboxPopover
						v-else
						title="细纱管颜色"
						:default-list.sync="ruleForm.orderBatchPrdNotice.inputTubeColorList"
						:option-list="xsColorList"
						@change="onColorItemChange($event, 'inputTubeColorList')"
					></checkboxPopover>
				</el-form-item>
			</el-col>-->
			<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
				<el-form-item class="margin-bottom-10" label="粗纱管颜色">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.orderBatchPrdNotice.inputTubeColorList ? ruleForm.orderBatchPrdNotice.inputTubeColorList.map(x => x.name).join(',') : '' }}</span>
					<checkboxPopover
						v-else
						title="粗纱管颜色"
						:default-list.sync="ruleForm.orderBatchPrdNotice.inputTubeColorList"
						:option-list="optionData.csColorList"
						@change="onColorItemChange($event, 'inputTubeColorList')"
					></checkboxPopover>
				</el-form-item>
			</el-col>

			<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
				<el-form-item class="margin-bottom-10" label="纸管颜色">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.orderBatchPrdNotice.paperTubeList ? ruleForm.orderBatchPrdNotice.paperTubeList.map(x => x.name).join(',') : '' }}</span>
					<checkboxPopover
						v-else
						title="纸管颜色"
						:default-list.sync="ruleForm.orderBatchPrdNotice.paperTubeList"
						:option-list="optionData.tubeColorList"
						@change="onColorItemChange($event, 'paperTubeList')"
					></checkboxPopover>
				</el-form-item>
			</el-col>
			<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
				<el-form-item class="margin-bottom-10" label="腰绳颜色">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.waistPopeList ? ruleForm.waistPopeList.map(x => x.name).join(',') : '' }}</span>
					<checkboxPopover
						v-else
						title="腰绳颜色"
						:default-list.sync="ruleForm.waistPopeList"
						:option-list="optionData.waistPopeList"
						@change="returnData"
					></checkboxPopover>
				</el-form-item>
			</el-col>
			<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
				<el-form-item class="margin-bottom-10" label="标签颜色">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.labelColorList ? ruleForm.labelColorList.map(x => x.name).join(',') : '' }}</span>
					<checkboxPopover
						v-else
						title="标签颜色"
						:default-list.sync="ruleForm.labelColorList"
						:option-list="optionData.labelColorList"
						@change="returnData"
					></checkboxPopover>
				</el-form-item>
			</el-col>
			<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
				<el-form-item class="margin-bottom-10" label="定量(g/m)">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.orderBatchPrdNotice.gramWeight ? `${ruleForm.orderBatchPrdNotice.gramWeight}g/${ruleForm.orderBatchPrdNotice.meters}m` : '' }}</span>
					<div v-else class="flex-start-center">
						<jk-number-input v-model="ruleForm.orderBatchPrdNotice.gramWeight" placeholder="克重" size="medium" @change="onMgChange"></jk-number-input>
						<span style="margin: 0 8px">/</span>
						<jk-number-input v-model="ruleForm.orderBatchPrdNotice.meters" placeholder="米长" size="medium" @change="onMgChange"></jk-number-input>
					</div>
				</el-form-item>
			</el-col>-->
			<el-col :span="24">
				<el-form-item class="margin-bottom-10" label="备注">
					<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.orderBatchPrdNotice.remark }}</span>
					<el-input v-else v-model="ruleForm.orderBatchPrdNotice.remark" type="textarea" :rows="1" placeholder="请输入" @change="returnData" />
				</el-form-item>
			</el-col>
		</el-row>
		<div class="flex-between-center margin-bottom-4">
			<div class="flex-start-center" style="align-items: flex-end">
				<el-button v-if="pageType !== 'detail'" class="item-gap" type="primary" size="mini" icon="el-icon-plus" @click="onAddMachineBtn">生产机台</el-button>
				<el-tag v-if="pageType === 'detail'" class="item-gap" type="primary" size="mini">
					<span class="el-icon-tickets item-gap"></span>
					<span>生产机台</span>
				</el-tag>
				<span v-if="showOpen" style="font-size: 13px;color: #808695;">(共计: {{ ruleForm.orderBatchPrdNotice.prdNoticeMachineList ? ruleForm.orderBatchPrdNotice.prdNoticeMachineList.length : 0 }}台)</span>
				<span v-else style="font-size: 13px;color: #808695;">(共计: {{ ruleForm.orderBatchPrdNotice.prdNoticeMachineCloseList ? ruleForm.orderBatchPrdNotice.prdNoticeMachineCloseList.length : 0 }}台)</span>
			</div>
			<div class="flex-end-center">
				<div class="flex-start-center">
					<span style="font-size: 13px;color: #515a6e;margin-right: 4px;">机台:</span>
					<el-radio-group v-model="showOpen" size="small">
						<el-radio-button :label="true">待开和已开台</el-radio-button>
						<el-radio-button :label="false">已了机</el-radio-button>
					</el-radio-group>
				</div>
			</div>
		</div>
		<notice-machine-list
			v-if="showOpen"
			:height="600"
			process-code="XS"
			:page-type="pageType"
			:input-color-list="optionData.csColorList"
			:show-out-color="false"
			:show-input-color="false"
			:show-d-l="false"
			:out-color-list="optionData.xsColorList"
			:zl-color-list="optionData.tubeColorList"
			:machine-list.sync="ruleForm.orderBatchPrdNotice.prdNoticeMachineList"
			@update="returnData"
		></notice-machine-list>
		<notice-machine-list
			v-else
			:height="600"
			page-type="detail"
			process-code="XS"
			:input-color-list="optionData.csColorList"
			:show-out-color="false"
			:show-input-color="false"
			:out-color-list="optionData.xsColorList"
			:zl-color-list="optionData.tubeColorList"
			:machine-list.sync="ruleForm.orderBatchPrdNotice.prdNoticeMachineCloseList"
			@update="returnData"
		></notice-machine-list>
		<select-machine-gantt-dialog
			:form-data="ruleForm"
			:checked-data="checkMachineData"
			:dialog-state="selectMachineGanttDialogState"
			@on-visible-change="onVisibleChangeOfSelectMachineGanttDialog"
			@on-confirm="onConfirmBtnOfSelectMachineGanttDialog"
		></select-machine-gantt-dialog>
	</div>
</template>

<script>
    import checkboxPopover from './checkbox-popover';
    import remoteSearchBatchCodeInput from '../../../qhPrd/productConfigCotton/components/remote-search-batch-code-input';
    import checkboxProductDialog from '../checkbox-product-dialog';
    import noticeMachineList from '../../../productionNoticeOrder/components/notice-machine-list';
    import { noticeStateList, openStateList } from '../../../../../utils/jk/status-option-list';
    import { formatDate, tipsBar } from '../../../../../utils/jk/jk-tool';
    import selectMachineGanttDialog from '../../../productionNoticeOrder/components/select-machine-gantt-dialog';
    import getTubeColor from '../../../foreSpinPrd/foreSpinningPlan/components/form-box/get-tube-color';
    export default {
        mixins: [getTubeColor],
        props: {
            pageType: {
                type: String,
                default: ''
            },
            tabItem: {
                type: Object,
                default() {
                    return {};
                }
            },
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            optionData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        components: {
            selectMachineGanttDialog,
            noticeMachineList,
            checkboxPopover,
            remoteSearchBatchCodeInput,
            checkboxProductDialog
        },
        data() {
            return {
                showOpen: true,
                activeStateList: [0, 1, 2, 3],
                noticeStateList: noticeStateList,
                workshopList: [],
                processList: [],
                selectMachineGanttDialogState: false,
                openStateList: openStateList,
                tubeColorList: [],
                waistPopeList: [],
                sealingRopeList: [],
                technologyOrderInfo: {
                    'batchCode': '',
                    'code': '',
                    'dailyYield': 0,
                    'efficiencyPercent': 0,
                    'fixedLength': 0,
                    'gramWeight': 0,
                    'id': null,
                    'machineModelCode': '',
                    'machineModelId': 0,
                    'machineModelName': '',
                    'meters': 0,
                    'moistureRegain': 0,
                    'numbers': 0,
                    'processCode': '',
                    'processId': 0,
                    'processName': '',
                    'productCode': '',
                    'productId': 0,
                    'productModels': '',
                    'productName': '',
                    'specDate': '',
                    'specEmpId': 0,
                    'specEmpName': '',
                    'specSheetParamList': [],
                    'spindleNum': 0
                },
                selectProductDialogState: false,
                ruleForm: {},
                checkMachineData: []
            };
        },
        methods: {
            onWorkshopChange(e) {
                const item = this.workshopList.find(x => x.id === e) || {};
                this.$set(this.ruleForm.orderBatchPrdNotice, 'workshopId', item.id);
                this.$set(this.ruleForm.orderBatchPrdNotice, 'workshopCode', item.code);
                this.$set(this.ruleForm.orderBatchPrdNotice, 'workshopName', item.name);
                this.returnData();
            },
            onProcessChange(e) {
                const item = this.processList.find(x => x.id === e) || {};
                this.$set(this.ruleForm.orderBatchPrdNotice, 'processId', item.id);
                this.$set(this.ruleForm.orderBatchPrdNotice, 'processCode', item.code);
                this.$set(this.ruleForm.orderBatchPrdNotice, 'processName', item.name);
                this.returnData();
            },
            onMgChange() {
                this.ruleForm.orderBatchPrdNotice.prdNoticeMachineList.forEach(x => {
                    if (x.openingState !== 4) {
                        this.$set(x, 'gramWeight', this.ruleForm.orderBatchPrdNotice.gramWeight);
                        this.$set(x, 'meters', this.ruleForm.orderBatchPrdNotice.meters);
                        this.$set(x.specSheet, 'gramWeight', this.ruleForm.orderBatchPrdNotice.gramWeight);
                        this.$set(x.specSheet, 'meters', this.ruleForm.orderBatchPrdNotice.meters);
                    }
                });
                this.returnData();
            },
            onColorItemChange(e, keyName) {
                this.$set(this.ruleForm, keyName, e);
                this.ruleForm.orderBatchPrdNotice.prdNoticeMachineList.forEach(x => {
                    if (x.openingState !== 4) {
                        this.$set(x, keyName, e);
                    }
                });
                this.returnData();
            },
            onVisibleChangeOfSelectMachineGanttDialog(e) {
                this.selectMachineGanttDialogState = e;
            },
            onConfirmBtnOfSelectMachineGanttDialog(arr) {
                this.insertMachineData(arr);
                this.$nextTick(() => {
                    this.selectMachineGanttDialogState = false;
                });
                this.returnData();
            },
            insertMachineData(arr) {
                const technologyInfo = JSON.parse(JSON.stringify(this.technologyOrderInfo));
                // 没有工艺单时，默认定量和台日单产
                if (!this.ruleForm.orderBatchPrdNotice.specSheetId) {
                    technologyInfo.dailyYield = this.ruleForm.orderBatchPrdNotice.dailyYield;
                    technologyInfo.meters = this.ruleForm.orderBatchPrdNotice.meters;
                    technologyInfo.gramWeight = this.ruleForm.orderBatchPrdNotice.gramWeight;
                }
                // 机台的翻改日期、计划开台日期
                let changeD = '';
                if (formatDate(Date.now()) <= this.ruleForm.orderBatchPrdNotice.planStartDate) {
                    changeD = this.ruleForm.orderBatchPrdNotice.planStartDate;
                } else {
                    changeD = formatDate(Date.now());
                }
                this.ruleForm.orderBatchPrdNotice.prdNoticeMachineList = this.ruleForm.orderBatchPrdNotice.prdNoticeMachineList || [];
                arr.forEach(x => {
                    // technologyInfo.gramWeight = this.ruleForm.orderBatchPrdNotice.productOrder.gramWeight;
                    // technologyInfo.meters = this.ruleForm.orderBatchPrdNotice.productOrder.meters;
                    this.ruleForm.orderBatchPrdNotice.prdNoticeMachineList.push({
                        changeDate: changeD,
                        time: '10:00:00',
                        machineId: x.id,
                        machineCode: x.code,
                        machineName: x.name,
                        ltMachineId: x.ltMachineId,
                        ltMachineCode: x.ltMachineCode,
                        ltMachineName: x.ltMachineName,
                        machineModelName: x.machineModelName,
                        productionQty: null,
                        productionDays: null,
                        subPlanStartDate: changeD,
                        subPlanEndDate: '',
                        dailyYield: this.ruleForm.orderBatchPrdNotice.dailyYield,
                        processId: x.processId,
                        processCode: x.processCode,
                        processName: x.processName,
                        specSheet: technologyInfo,
                        openSpinCount: x.spinCount,
                        openingState: 0,
                        inputTubeColorList: this.ruleForm.orderBatchPrdNotice.inputTubeColorList ? JSON.parse(JSON.stringify(this.ruleForm.orderBatchPrdNotice.inputTubeColorList)) : [],
                        outputTubeColorList: this.ruleForm.orderBatchPrdNotice.outputTubeColorList ? JSON.parse(JSON.stringify(this.ruleForm.orderBatchPrdNotice.outputTubeColorList)) : [],
                        paperTubeList: this.ruleForm.orderBatchPrdNotice.paperTubeList ? JSON.parse(JSON.stringify(this.ruleForm.orderBatchPrdNotice.paperTubeList)) : []
                    });
                });
            },
            onAddMachineBtn() {
                // 除了已了机，不允许重复添加
                this.checkMachineData = this.ruleForm.orderBatchPrdNotice.prdNoticeMachineList ? this.ruleForm.orderBatchPrdNotice.prdNoticeMachineList.filter(x => x.openingState !== 4) : [];
                this.selectMachineGanttDialogState = true;
            },
            returnData() {
                const params = JSON.parse(JSON.stringify(this.ruleForm));
                this.$emit('return-data', params);
            }
        },
        mounted() {
        },
        watch: {
            tabItem: {
                handler(newVal) {
                    console.log(newVal, 'newVal');
                    this.ruleForm = newVal ? JSON.parse(JSON.stringify(newVal)) : {};
                    // TODO:待定
                    // this.ruleForm.orderBatchPrdNotice.gramWeight = this.formData.yarnCount ? 583.1 / this.formData.yarnCount : ''; // 定量g
                    // this.ruleForm.orderBatchPrdNotice.meters = 1000; // 定量m

                    this.processList = this.$store.state.user.userProcess.processList;
                    this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                    this.getXsColorListRequest();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
